<div class="content-heading">Project #1 Management
   <small>In lacinia tellus vitae nisl consectetur pellentesque.</small>
</div>
<div class="row">
    <div class="col-lg-8">
        <!-- Main panel-->
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right mt">
                    <div class="label label-info">started</div>
                </div>
                <h4 class="mv">
               <span>Project #1</span>
            </h4>
            </div>
            <div class="panel-body bb bt">
                <a class="inline" tooltip="Team leader">
                    <img class="img-circle thumb48" src="assets/img/user/03.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/07.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/08.jpg" alt="project member" />
                </a>
                <a class="inline">
                    <img class="img-circle thumb24" src="assets/img/user/09.jpg" alt="project member" />
                </a>
                <div class="pull-right mt">
                    <button class="btn btn-default" type="button">Add Member</button>
                </div>
            </div>
            <div class="panel-body">
                <h4>Description</h4>
                <p>Nam eget risus tellus. Vestibulum pretium mollis ligula, at ultrices quam egestas et. Sed mattis tincidunt ligula, ac porttitor lectus porttitor condimentum. Ut et ligula ante, nec mollis lacus. Aliquam erat volutpat. Aliquam auctor diam ut urna lacinia faucibus. Proin est sapien, convallis non hendrerit nec, laoreet ut ipsum. Aenean vehicula, nulla vel pharetra accumsan, elit risus pretium arcu, nec ultrices urna ligula vel nunc. Cras porttitor orci eget nibh pharetra mollis.</p>
                <p>Maecenas at porta purus. Ut eu aliquam orci. Praesent in libero at neque gravida venenatis auctor nec arcu.</p>
                <p class="text-right">
                    <button class="btn btn-default" type="button">View all documents</button>
                </p>
            </div>
            <div class="panel-body">
                <div class="mb">
                    <small class="pull-left">Activity over time</small>
                    <div class="sparkline text-center" [sparkline]="sparkOptionsActivity" values="2,4,5,6,10,7,8,5,7,7,11,8,6,9,11,9,13,14,12,16"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row text-center">
                    <div class="col-xs-4">
                        <div class="inline">
                            <div class="sparkline" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                        </div>
                        <p class="mt-lg">Issues</p>
                    </div>
                    <div class="col-xs-4">
                        <div class="inline">
                            <div class="sparkline" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                        </div>
                        <p class="mt-lg">Commits</p>
                    </div>
                    <div class="col-xs-4">
                        <div class="inline">
                            <div class="sparkline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </div>
                        <p class="mt-lg">Files</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Main panel-->
        <!-- Team messages-->
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right label label-danger">5</div>
                <div class="pull-right label label-success">12</div>
                <div class="panel-title">Team messages</div>
            </div>
            <!-- START list group-->
            <scrollable class="list-group" height="180">
                <!-- START list group item-->
                <a class="list-group-item" href="#">
                    <div class="media-box">
                        <div class="pull-left">
                            <img class="media-box-object img-circle thumb32" src="assets/img/user/02.jpg" alt="Image" />
                        </div>
                        <div class="media-box-body clearfix">
                            <small class="pull-right">2h</small>
                            <strong class="media-box-heading text-primary">
                        <span class="circle circle-success circle-lg text-left"></span>Catherine Ellis</strong>
                            <p class="mb-sm">
                                <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                            </p>
                        </div>
                    </div>
                </a>
                <!-- END list group item-->
                <!-- START list group item-->
                <a class="list-group-item" href="#">
                    <div class="media-box">
                        <div class="pull-left">
                            <img class="media-box-object img-circle thumb32" src="assets/img/user/03.jpg" alt="Image" />
                        </div>
                        <div class="media-box-body clearfix">
                            <small class="pull-right">3h</small>
                            <strong class="media-box-heading text-primary">
                        <span class="circle circle-success circle-lg text-left"></span>Jessica Silva</strong>
                            <p class="mb-sm">
                                <small>Cras sit amet nibh libero, in gravida nulla. Nulla facilisi.</small>
                            </p>
                        </div>
                    </div>
                </a>
                <!-- END list group item-->
                <!-- START list group item-->
                <a class="list-group-item" href="#">
                    <div class="media-box">
                        <div class="pull-left">
                            <img class="media-box-object img-circle thumb32" src="assets/img/user/09.jpg" alt="Image" />
                        </div>
                        <div class="media-box-body clearfix">
                            <small class="pull-right">4h</small>
                            <strong class="media-box-heading text-primary">
                        <span class="circle circle-danger circle-lg text-left"></span>Jessie Wells</strong>
                            <p class="mb-sm">
                                <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                            </p>
                        </div>
                    </div>
                </a>
                <!-- END list group item-->
                <!-- START list group item-->
                <a class="list-group-item" href="#">
                    <div class="media-box">
                        <div class="pull-left">
                            <img class="media-box-object img-circle thumb32" src="assets/img/user/12.jpg" alt="Image" />
                        </div>
                        <div class="media-box-body clearfix">
                            <small class="pull-right">1d</small>
                            <strong class="media-box-heading text-primary">
                        <span class="circle circle-danger circle-lg text-left"></span>Rosa Burke</strong>
                            <p class="mb-sm">
                                <small>Cras sit amet nibh libero, in gravida nulla. Nulla...</small>
                            </p>
                        </div>
                    </div>
                </a>
                <!-- END list group item-->
                <!-- START list group item-->
                <a class="list-group-item" href="#">
                    <div class="media-box">
                        <div class="pull-left">
                            <img class="media-box-object img-circle thumb32" src="assets/img/user/10.jpg" alt="Image" />
                        </div>
                        <div class="media-box-body clearfix">
                            <small class="pull-right">2d</small>
                            <strong class="media-box-heading text-primary">
                        <span class="circle circle-danger circle-lg text-left"></span>Michelle Lane</strong>
                            <p class="mb-sm">
                                <small>Mauris eleifend, libero nec cursus lacinia...</small>
                            </p>
                        </div>
                    </div>
                </a>
                <!-- END list group item-->
            </scrollable>
            <!-- END list group-->
            <!-- START panel footer-->
            <div class="panel-footer clearfix">
                <div class="input-group">
                    <input class="form-control input-sm" type="text" placeholder="Type message .." />
                    <span class="input-group-btn">
                  <button class="btn btn-default btn-sm" type="button"><i class="fa fa-paperclip"></i>
                  </button>
               </span>
                </div>
            </div>
            <!-- END panel-footer-->
        </div>
        <!-- End Team messages-->
    </div>
    <div class="col-lg-4">
        <!-- Aside panel-->
        <div class="panel b">
            <div class="panel-body bb">
                <div class="clearfix">
                    <div class="pull-left">
                        <button class="btn btn-default btn-oval" type="button">
                            <em class="fa fa-play fa-fw text-muted"></em>
                            <span>Start</span>
                        </button>
                        <button class="btn btn-default btn-oval" type="button">
                            <em class="fa fa-pause fa-fw text-muted"></em>
                            <span>Pause</span>
                        </button>
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-danger btn-oval" type="button">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="panel-body bb">
                <div class="table-grid table-grid-align-middle mv">
                    <div class="col">
                        <progressbar class="progress-xs m0" value="48" type="info">48%</progressbar>
                    </div>
                    <div class="col wd-xxs text-right">
                        <div class="text-bold text-muted">48%</div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <ul class="list-inline mv">
                    <li>
                        <div class="badge p-sm bg-warning">priority</div>
                    </li>
                    <li>
                        <div class="badge p-sm bg-gray">angularjs</div>
                    </li>
                    <li>
                        <div class="badge p-sm bg-gray">jquery</div>
                    </li>
                    <li>
                        <div class="badge p-sm bg-gray">gulp</div>
                    </li>
                    <li>
                        <div class="badge p-sm bg-gray">git</div>
                    </li>
                    <li>
                        <div class="badge p-sm bg-gray">ios</div>
                    </li>
                </ul>
            </div>
            <table class="table bb">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>02/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Estimated Hours</strong>
                        </td>
                        <td>122hs</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Time Consumed</strong>
                        </td>
                        <td>62hs</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Commits</strong>
                        </td>
                        <td>140</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Issues</strong>
                        </td>
                        <td>39</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Files</strong>
                        </td>
                        <td>87</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <p>Tara Sanders</p>
                            <p>Alan Smith</p>
                            <p>Priscilla Peters</p>
                            <p>Madison Willis</p>
                            <p>Lesa Marshall</p>
                            <p>Kylie Freeman</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Recent files</strong>
                        </td>
                        <td>
                            <scrollable class="list-group" height="120">
                                <table class="table table-bordered bg-transparent">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-code-o"></em>
                                            </td>
                                            <td><a class="text-muted">database.controller.js</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-image-o"></em>
                                            </td>
                                            <td><a class="text-muted">baground-lg.png</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-code-o"></em>
                                            </td>
                                            <td><a class="text-muted">picture.controller.js</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-word-o"></em>
                                            </td>
                                            <td><a class="text-muted">applicat-diagrams.docx</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-code-o"></em>
                                            </td>
                                            <td><a class="text-muted">database.controller.js</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <em class="fa fa-lg fa-file-code-o"></em>
                                            </td>
                                            <td><a class="text-muted">database.controller.js</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </scrollable>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="text-right"><a class="btn btn-link">Open repository</a>
            </p>
        </div>
        <!-- end Aside panel-->
    </div>
</div>
